<template>

  <el-tooltip placement="top" content="分配权限" effect="dark">
    <el-button size="mini"
               type="warning"
               title="msg"
               icon="el-icon-setting"
               @click="btnAction()"
    >
      <!--    分配角色-->

    </el-button>
  </el-tooltip>

  <el-dialog
      title="提示"
      v-model="showDialog"
      width="50%"
  >
   <div style="align-items: start ; text-align: start ; line-height: 80px" >
     <p>当前用户： {{ username }}</p>
     <p>当前角色： {{role_name}}</p>
     <p>选择角色：
       <el-select v-model="selectedRoleId" placeholder="请选择角色">
         <el-option v-for="(item) in roleList "
                    :value="item.id"
                    :key="item.id"
                    :label="item.roleName"></el-option>
       </el-select>
     </p>
   </div>
    <template #footer>
    <span class="dialog-footer">
      <el-button @click="showDialog = false">取 消</el-button>
      <el-button type="primary" @click="submit()">确 定</el-button>
    </span>
    </template>
  </el-dialog>



</template>


<script>
import axios from "axios";

export default {
  name: "UserRoleSet",
  props: ['username', 'userId','role_name'],
  emits: ['update'],
  data() {
    return {
      showDialog: false,
      roleList: [],
      selectedRoleId: ''
    }
  },
  methods: {


    async btnAction() {
      this.$message.info("请求ing")
      this.showDialog = true

      const {data: res} = await axios.get('roles')
      console.log(res)
      if (res.meta.status !== 200) {
        return this.$message.error("请求角色列表失败")
      }
      this.roleList = res.data
      console.log(this.treeData)
    },



    //获取tree view roleId
    async submit() {

      if (!this.selectedRoleId) {
         return this.$message.error("请选择角色")
      }
      console.log(this.selectedRoleId)


      const {data: res} = await axios
          .put(`users/${this.userId}/role`, {
            rid: this.selectedRoleId
          });

      if (res.meta.status !== 200) {
        return this.$message.error("请求失败")
      }
      this.$message.success("角色分配请求成功")
      this.$emit("update")
      this.showDialog = false
      // this.defKey = []
      // console.log(rsStr)
    },
  },
}
</script>

<style scoped>

</style>